<template>
  <div class="home">
    <Child @Add="add" :list="list" />

    <!-- {{ list }} -->
    <!-- {{ List }} -->
  </div>
</template>
<script>
// import { getMoviesmore } from "../untils/api.js";
import { reactive, toRefs, computed, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import Child from "../components/Child.vue";
import { useStore } from "vuex";
export default {
  setup() {
    //获取路由
    const router = useRoute();
    //ref绑定的数据需要通过.value进行访问
    const count = ref("111");
    console.log(count.value);
    console.log(router);

    //获取vuex中的store
    const store = useStore();
    //触发vuex中的getList,发送异步请求
    store.dispatch("getList");
    console.log(store.state.list);
    
    //计算属性
    const List = computed(() => store.state.list.res);


    const state = reactive({
      list: "1243",
      msg: "szx",
    });
    console.log(state.msg)
    onMounted(() => {
      // GETMORE()
      console.log("onMounted");
      // console.log(state.msg);
    });
    watch(state,(o,n)=>{
        console.log('数据改变了')
        console.log(o)
        console.log(n)
    });
    //定义add函数
    const add = (i) => {
      state.list++;
      console.log(i);
    };
    return {
      ...toRefs(state),
      List,
      add,
    };
  },
  components: {
    Child,
  },
  mounted() {
    console.log("mounted");
  },
};
</script>
